<template>
    <div class="order-delete">
        <div class="deleteL" @click="changeDelete">
            <public-item :unit="unit" :title="title" :weight="weight" :number="number"/>
        </div>
        <div class="right-line">
            <div class="line"></div>
            <div class="delete" @click="deleteSure">
                <img src="../../../../static/images/delete-ash.png">
            </div>
        </div>
    </div>
</template>

<script>
    import PublicItem from './public.vue';

    export default {
        props: ['index', 'unit', 'title', 'weight', 'number', 'selectState', "item"],
        components: {
            PublicItem
        },
        data() {
            return {
                deleteShow: false
            }
        },
        mounted() {
            if (this.$store.state.shop.operateMode != 'stock') {
                for (let x of this.$store.state.shop.selectItems) {
                    if (this.index == x) {
                        this.deleteShow = true;
                        break;
                    }
                }
            }
        },
        methods: {
            changeDelete() {
                this.deleteShow = !this.deleteShow;

                if (this.$store.state.shop.operateMode == 'stock') {
                    if (this.deleteShow) {
                        this.$emit('onSelectState', {
                            mode: 'select', index: this.index
                        });
                    } else {
                        this.$emit('onSelectState', {
                            mode: 'unSelect', index: this.index
                        });
                    }
                } else {
                    if (this.deleteShow) {
                        this.$store.commit('shop/addSelectItem', this.index);
                    } else {
                        this.$store.commit('shop/deleteSelectItem', this.index);
                    }
                }
            },
            deleteSure() {
                console.log('logs ', this.item)
                console.log('logs ', this.index)
                this.$store.commit('shop/deleteShopCartsItem', this.index);
                // this.$router.go(0);
               /* let url = '/api/home/user/delStock',
                    params = {
                        id: this.item.id,
                        token: this.$store.state.options.user.token
                    };

                this.$util.postRequestInterface(url, params, (res) => {
                    this.$store.commit('shop/deleteShopCartsItem', this.index);
                    this.$router.go(0);
                });*/
            }
        },
        watch: {
            '$store.state.shop.status.allSelect'(nVal, oVal) {
                this.deleteShow = nVal;
            },
            '$store.state.shop.stock.allSelect'(nVal, oVal) {
                this.deleteShow = nVal;

                if (nVal) {
                    this.$emit('onSelectState', {
                        mode: 'select', index: this.index
                    });
                } else {
                    this.$emit('onSelectState', {
                        mode: 'unSelect', index: this.index
                    });
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .order-delete {
        display: flex;
        justify-content: space-between;
        padding: 1rem;

        .deleteL {
            display: flex;
            align-items: center;

            img {
                width: 1.5rem;
                height: 1.5rem;
                margin-right: 1rem;
            }
        }

        .right-line {
            display: flex;

            .line {
                width: .08rem;
                margin: 0.8rem 0;
                background: rgba(238, 238, 238, 1);
                margin-right: 2rem;
            }

            .delete {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #FF0101;

                img {
                    width: 1.6rem;
                    height: 1.6rem;
                    padding-right: 2rem;
                }
            }
        }
    }
</style>
